<template>
  <div class="category">
    <el-card>
      <!-- 搜索框 -->
      <el-row class="category_list">
        <el-col :span="12">
          <el-button size="small" type="primary" @click="addCategory">添加分类</el-button></el-col>
        <el-col :span="12">
          <el-input
            v-model="pageConfig.title_contains"
            placeholder="输入关键字"
            type="text"
            class="input-with-select"
          >
            <el-button slot="append" icon="el-icon-search" @click="searchCategory" />
          </el-input>
        </el-col>
      </el-row>
      <!-- 表格渲染 -->
      <el-row>
        <el-table
          class="table_list"
          :data="tableData"
          border
          style="width: 100%"
        >
          <el-table-column fixed prop="image" label="图片" style="width: 25%">
            <template v-slot="scoped">
              <img v-fixImg :src="scoped.row.image" style="width: 100px; height: 100px" alt=""></template>
          </el-table-column>
          <el-table-column prop="title" label="标题" style="width: 25%" />
          <el-table-column prop="desc" label="介绍" style="width: 25%" />
          <el-table-column fixed="right" label="操作" style="width: 25%">
            <template v-slot="scoped">
              <el-button type="primary" size="small" @click="editCategory(scoped.row.id)">编辑</el-button>
              <el-button type="danger" size="small" @click="delCategory(scoped.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <!-- 分页器 -->
      <el-row>
        <div class="block">
          <el-pagination layout="prev, pager, next" :total="total" :page-size="pageConfig._limit" :current-page="currentPage" @current-change="pageChange" />
        </div>
      </el-row>
    </el-card>
    <categoryTable ref="addCategory" :is-show-dialog.sync="isShowDialog" :cate-data.sync="cateData" @reloadPage="reloadPage" />
  </div>
</template>

<script>
import { getCategoryList, delCategory, searchCategory, getCategoryDetail } from '@/api/category'
import categoryTable from './component/categoryTable.vue'
export default {
  components: { categoryTable },
  data() {
    return {
      tableData: [],
      cateData: {},
      isShowDialog: false,
      total: 0,
      pageConfig: {
        _limit: 5,
        _start: 0,
        title_contains: ''
      },
      currentPage: 1
    }
  },

  async created() {
    this.getCategoryList()
  },
  methods: {

    async getCategoryList() {
      const result = await getCategoryList(this.pageConfig)
      console.log(79, result)
      const res = await searchCategory({ title_contains: this.pageConfig.title_contains })
      this.total = res
      this.tableData = result
    },
    async addCategory() {
      this.isShowDialog = true
    },
    reloadPage(id) {
      if (this.tableData.length === this._limit && !id) {
        this.total++
        this.currentPage++
        this.pageConfig._start += this.pageConfig._limit
      }
      this.getCategoryList()
    },
    async delCategory(id) {
      try {
        await this.$confirm('确认要删除吗?')
        if (this.tableData.length === 1) {
          this.pageConfig._start = this.pageConfig._start - this.pageConfig._limit
          this.currentPage--
          this.total--
          this.getCategoryList()
        }
        await delCategory(id)
        this.$message.success('删除成功!')
        this.getCategoryList()
      } catch (error) {
        console.log(error)
      }
    },
    pageChange(page) {
      this.pageConfig._start = page > 1 ? (page - 1) * this.pageConfig._limit : 0
      this.currentPage = page
      this.getCategoryList()
    },
    async  searchCategory() {
      this.pageConfig._start = 0
      this.getCategoryList()
    },
    async editCategory(id) {
      this.isShowDialog = true
      const res = await getCategoryDetail(id)
      this.$nextTick(() => {
        console.log(124, res)
        this.cateData = res
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.category {
  padding: 10px;
}
.category_list {
  border-bottom: 1px solid #ccc;
  padding-bottom: 20px;
}
.table_list {
  margin-top: 20px;
}
.block {
  text-align: center;
  margin-top: 20px;
}
</style>
